/* Alternatywne czcionki do Segoe */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);

/* GENERAL */
body, div, p, table, td, ul, ol, h1, h2 {
	margin: 0;
	padding: 0;
	font-family: "Segoe UI", "Segoe UI Light", "Open Sans", Helvetica, Arial, Sans-Serif;
}

body {
	background-image: none;
	background-color: Black;
	color: #EEE;
	padding: 20px 0;
	font-family: "Segoe UI Light", "Open Sans", Helvetica, Arial, Sans-Serif;
}

body.gameBody {
	background-color: #294790;
}
body.gameBody01 {
	background-color: #339933;
}
body.gameBody11 {
	background-color: #A200FF;
}
body.gameBody21 {
	background-color: #E51400;
}

h1, h2 {
	font-weight: normal;
	font-family: "Segoe UI Light", "Open Sans", Helvetica, Arial, Sans-Serif;
	margin: 10px 0;
}

p {
	line-height: 130%;
}

img {
	border: none;
}

/* HEADER */
#gameTitle {
	font-size: 50px;
	margin: 0 70px;
}

#jsbLogoIcon {
	float: right;
}

ul#gameTopMenu {
	list-style: none;
	font-size: 28px;
	margin: 0 70px 20px 70px;
	font-family: "Segoe UI Light", "Segoe Light", Segoe, "Open Sans", Helvetica, Arial, Sans-Serif;
}

ul#gameTopMenu li {
	display: inline-block;
	margin-right: 35px;
	cursor: pointer;
	color: #ccc;
}

ul#gameTopMenu li.selected {
	color: white;
	font-weight: 800;
}
/* END HEADER */

/* PAGE MAIN CONTENT */
#viewPort {
	width: 100%;
	max-width: 1800px;
	min-width: 800px;
	overflow: hidden;
	position: relative;
/*	outline: 1px solid red;*/
	height: 470px;
	color: white;
}

#viewPort a, #viewPort a:link, #viewPort a:visited {
	color: white;
	text-decoration: none;
}

#viewPort a:active, #viewPort a:hover {
	text-decoration: underline;
}

#appContainer {
	width: 10000px;
	height: 450px;
	overflow: visible;
	position: absolute;
}
/* END MAIN CONTENT */

.panelsArea {
	width: 1100px;
	height: 450px;
    position: relative;
    float: left;
	margin: 0 0 0 70px;
}

.panel {
	background-color: Black;
    position: relative;
    width: 300px;
	margin: 0 10px 10px 0;
    padding: 10px;
	float: left;
	min-height: 120px;
	overflow: auto;
}

#disqusPanel {
	width: 500px;
	overflow: auto;
	height: inherit;
	background: #ff0097; /* Old browsers */
	background: -moz-linear-gradient(top, #ff0097 0%, #a50060 82%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0097), color-stop(82%,#a50060)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff0097 0%,#a50060 82%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff0097 0%,#a50060 82%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ff0097 0%,#a50060 82%); /* IE10+ */
	background: linear-gradient(top, #ff0097 0%,#a50060 82%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0097', endColorstr='#a50060',GradientType=0 ); /* IE6-9 */
}

#disqusPanel div, #disqusPanel p, #disqusPanel a {
	font-family: "Segoe UI Semibold", Verdana, Tahoma, Helvetica, Arial, Sans-Serif;
}

#disqusPanel div.panelContent {
	margin-bottom: 50px;
}

#boardPanel, #controlPanel, #helpPanel, #scorePanel {
	height: 100%
}

#boardPanel {
	background: #008ff5; /* Old browsers */
	background: -moz-linear-gradient(top, #008ff5 0%, #003780 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#008ff5), color-stop(100%,#003780)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #008ff5 0%,#003780 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #008ff5 0%,#003780 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #008ff5 0%,#003780 100%); /* IE10+ */
	background: linear-gradient(top, #008ff5 0%,#003780 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008ff5', endColorstr='#003780',GradientType=0 ); /* IE6-9 */
}

#controlPanel {
	width: 350px;
	background: #46c91e; /* Old browsers */
	background: -moz-linear-gradient(top, #46c91e 0%, #1f7000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#46c91e), color-stop(100%,#1f7000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #46c91e 0%,#1f7000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #46c91e 0%,#1f7000 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #46c91e 0%,#1f7000 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c91e', endColorstr='#1f7000',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #46c91e 0%,#1f7000 100%); /* W3C */
}

#helpPanel {
	background: #00d1ca; /* Old browsers */
	background: #00b7b4; /* Old browsers */
	background: -moz-linear-gradient(top, #00b7b4 0%, #005d66 77%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7b4), color-stop(77%,#005d66)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #00b7b4 0%,#005d66 77%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #00b7b4 0%,#005d66 77%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #00b7b4 0%,#005d66 77%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7b4', endColorstr='#005d66',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #00b7b4 0%,#005d66 77%); /* W3C */
}

#socialToolsPanel {
	background: #ff6e97; /* Old browsers */
	background: -moz-linear-gradient(top, #ff6e97 5%, #ec295d 60%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#ff6e97), color-stop(60%,#ec295d)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff6e97 5%,#ec295d 60%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff6e97 5%,#ec295d 60%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ff6e97 5%,#ec295d 60%); /* IE10+ */
	background: linear-gradient(top, #ff6e97 5%,#ec295d 60%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6e97', endColorstr='#ec295d',GradientType=0 ); /* IE6-9 */
}

#gameArea {
	width: 100%;
}

#selectedScore {
	font-weight: normal;
	color: #cccccc;
}

#totalScore {
	font-weight: normal;
	color: #cccccc;
}

#gameTypeTitle {
	font-weight: normal;
	color: gray;
}

#boardArea, #storeArea {
	background-color: White;
	border: 2px solid #fff;
	padding: 2px;
	margin: 0 5px 10px 0;
	display: table;
}

#storeArea {
	float: left;
	display: none;
}

#boardTable, #storeTable {
	background-color: white;
	border-collapse: collapse;
/*
	filter: alpha(opacity=90);
	-moz-opacity: 0.90;
	opacity: 0.90;
*/
}

#boardTable td, #storeTable td {
	width: 16px;
	height: 17px;
	font-size: 8px;
	padding: 1px;
	background-position: 50% 50%;
}

#boardTable {
	padding: 2px;
}

.panelTitle {
	font-size: xx-large;
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 10px;
}

.panelButtons {
    bottom: 0;
    height: 48px;
    left: 0;
    padding: 10px 0;
    position: absolute;
    width: 100%;
	border-top: 1px solid white;
    text-align: center;
}

.panelButtons input {
	border: none;
	padding: 2px 3px;
}

.scoreStatsData {
	font-size: 0.8em;
}

.scoreStatsData span {
	color: white;
	font-weight: bold;
}

#scorePanel {
	background: #cb60b3; /* Old browsers */
	background: -moz-linear-gradient(top, #cb60b3 0%, #ad1283 38%, #930a83 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(38%,#ad1283), color-stop(100%,#930a83)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #cb60b3 0%,#ad1283 38%,#930a83 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #cb60b3 0%,#ad1283 38%,#930a83 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #cb60b3 0%,#ad1283 38%,#930a83 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#930a83',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #cb60b3 0%,#ad1283 38%,#930a83 100%); /* W3C */
}

/* Panel najlepszych wyników wszystkich gier */
#topTenPanel {
	background-color: #a90329; /* Old browsers */
	background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
}

table#topTenStats {
	border-collapse: collapse;
	border-spacing: 2px;
}

table#topTenStats td, table#topTenStats th {
	border: 1px solid #ccc;
	padding: 2px 4px;
}

#topTenStatsHader {
	text-align: left;
}
/* Koniec */

#resultsStats {
	font-size: smaller;
}

#resultsStats td {
	text-align: center;
}

#playedGames, #avgScore, #maxScore {
	margin-left: 37px;
}

#boardBkgUrl {
    width: 100%;
}

#options p {
	margin-bottom: 15px;
}

/* Ikony poszczególnych typów gier*/
#gm_type1 {
	background-image:url("../../images/themes/metro/gametype-1.png");
}

#gm_type2 {
	background-image:url("../../images/themes/metro/gametype-2.png");
}

#gm_type3 {
	background-image:url("../../images/themes/metro/gametype-3.png");
}

#gm_type4 {
	background-image:url("../../images/themes/metro/gametype-4.png");
}

.gameTypeIcon {
	background-repeat:no-repeat;
	display:block;
	height:70px;
	width:70px;
	float: left;
	margin: 0 10px 10px 0;
	outline: none;
}

.gameTypeIcon:hover, .gameTypeIcon:active, .gameTypeIcon.selected {
	background-position: 0 -80px;
}

/* kulki */
.color1 {
	background: url("../../images/themes/metro/red_ball.png") no-repeat;
}

.color2 {
	background: url("../../images/themes/metro/green_ball.png") no-repeat;
}

.color3 {
	background: url("../../images/themes/metro/blue_ball.png") no-repeat;
}

.color4 {
	background: url("../../images/themes/metro/yellow_ball.png") no-repeat;
}

.square .color1 {
	background-color: #E51400;
	background-image: none;
}

.square .color2 {
	background-color: #339933;
	background-image: none;
}

.square .color3 {
	background-color: #0066cc;
	background-image: none;
}

.square .color4 {
	background-color: #ffcc00;
	background-image: none;
}

.color1.selected {
	background-color: #F89090;
}

.color2.selected {
	background-color: #BFF95A;
}

.color3.selected {
	background-color: #AAD4FF;
}

.color4.selected {
	background-color: #FBFB53;
}

.emptyField {
	background-color: transparent;
}

#prevIcon, #nextIcon {
	position: fixed;
	top: 0;
	width: 42px;
	z-index: 2000;
	height: 100%;
}

#prevIcon div, #nextIcon div {
	position: absolute;
	display: none;
}

#prevIcon {
	left: 0px;
}

#nextIcon {
	right: 0px;
}

#timeToMove {
	float: right;
	text-align: center;
}

#timeToMoveValue {
	font-size: xx-large;
	display: block;
	margin-top: 5px;
}

/* Formularz rejestracyjny */
#registerForm {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: #3399FF;
	z-index: 2000;
	padding: 15px;
	line-height: 1em;
	display: none;
}

#registerForm p {
	margin-bottom: 1.3em;
}

#registerForm label {
	display: block;
}

#registerForm input {
	border: 1px solid white;
	background-color: #3399ff;
	color: white;
}

#registerForm input:disabled {
	border-color: #cccccc;
	color: #cccccc;
}

#registerForm input[type=text] {
	background-color: white;
	color: #00468c;
}

#modalBackground {
	background-color: black;
	bottom: 0;
	left: 0;
	opacity: 0.8;
	position: fixed;
	right: 100%;
	top: 0;
	width: 100%;
	z-index: 1000;
	padding: 15% 0 0 0;
	text-align: center;
	font-size: xx-large;
	color: white;
}